<template>
  <div>
    <h1>用户信息收集</h1>
    <br />
    姓名: <input type="text" v-model="username" /><br /><br />
    年龄: <input type="text" v-model="age" /><br />
    <button @click="ti">提交</button>
    <button @click="chongzi">重置</button><br>
     <table  style="width: 600px;">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>
        <tr v-for="(item,key) in arr" :key="key">
            <td>{{item.username}}</td>
            <td>{{item.age}}</td>
            <td>
                <button @click="bianji(id=key)">编辑</button>
                <button @click="del(key)">删除</button>
            </td>
        </tr>
     </table>
      <div v-show="flag">
        <p>姓名<input type="text" v-model="user"></p>
        <p>年龄<input type="text" v-model="list"></p>
        <button @click="ti1(id)">提交</button>
         <button @click="chongzi">重置</button>
      </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: "",
      age: "",
      arr:JSON.parse(sessionStorage.getItem('his'))||[],
      flag:false,
    user:"",
    list:"",
    id:0
    };
  },
  methods: {

    ti(){
        var obj={username:this.username,age:this.age}
        this.arr.push(obj)
        sessionStorage.setItem('his',JSON.stringify(this.arr))
        // this.flag=false
    },
    del(key){
        this.arr.splice(key,1)
        sessionStorage.setItem('his',JSON.stringify(this.arr))
    },
    bianji(key){
        this.flag=true
        this.user=this.arr[key].username
        this.list=this.arr[key].age
    },

    chongzi(){
      this.username='',
      this.age=''
       this.arr=''
       sessionStorage.setItem('his',JSON.stringify(this.arr))
    },
    ti1(id){
      this.id=id
      console.log(id);
      this.arr[id].username=this.user
      this.arr[id].age=this.list
    }
 },
};
</script>

<style lang="scss" scoped>
</style>